<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box {
				height: 300px;
				width: 300px;
			}
		</style>
	</head>

	<body>
		<div id="box"></div>
	</body>
	<script>
		//简约版属性样式方法库
		var A = {
			//通过id获取元素
			g: function(id) {
				return document.getElementById(id);
			},
			//设置元素css属性
			css: function(id, key, value) {
				document.getElementById(id).style[key] = value;
			},
			//设置元素的属性
			attr: function(id, key, value) {
				document.getElementById(id)[key] = value;
			},
			html: function(id, html) {
				document.getElementById(id).innerHTML = html;
			},
			//元素绑定事件
			on: function(id, type, fn) {
				document.getElementById(id)['on' + type] = fn;
			}
		};
		//"通过这个代码库，我们再操作元素的属性样式时变得更简单。”
		A.css('box', 'background', 'red'); //设置css样式
		A.attr('box', 'className', 'box'); // 设置class
		A.html('box', '这是新添加的内容'); // 设置内容
		A.on('box', 'click', function() { // 绑定事件
			A.css('box', 'width', '500px');
		});
	</script>

</html>